<template>
  <div class="block">
    <div class="security_set">
      <h4>安全设置</h4>
      <ul class="revise">
        <li class="revise_item">
          <div class="revise_item_meta">
            <h4>账户密码</h4>
            <div class="revise_item_meta_desc">
              当前密码强度：<span>强</span>
            </div>
          </div>
          <div class="revise_item_action">
            <a style="color: #1890ff; font-size: 14px" @click="changePass"
              >修改</a
            >
          </div>
        </li>

        <li class="revise_item">
          <div class="revise_item_meta">
            <h4>密保手机</h4>
            <div class="revise_item_meta_desc">
              {{ userData.mobilebind
              }}<span v-if="userData.mobile">：{{ userData.mobile }}</span>
            </div>
          </div>
          <div class="revise_item_action">
            <a
              v-if="userData.mobile"
              style="color: #1890ff; font-size: 14px"
              @click="changePhone"
              >修改</a
            >
            <a
              v-else
              style="color: #1890ff; font-size: 14px"
              @click="changePhone"
              >绑定</a
            >
          </div>
        </li>
        <li class="revise_item">
          <div class="revise_item_meta">
            <h4>密保问题</h4>
            <div class="revise_item_meta_desc">
              未设置密保问题，密保问题可有效保护账户安全
              <span></span>
            </div>
          </div>
          <div class="revise_item_action">
            <a style="color: #1890ff; font-size: 14px">设置</a>
          </div>
        </li>
        <li class="revise_item">
          <div class="revise_item_meta">
            <h4>备用邮箱</h4>
            <div class="revise_item_meta_desc">
              {{ userData.emailbind
              }}<span v-if="userData.email"> ：{{ userData.email }}</span>
            </div>
          </div>
          <div class="revise_item_action">
            <a
              v-if="userData.email"
              style="color: #1890ff; font-size: 14px"
              @click="changeEmail"
              >修改</a
            >
            <a
              v-else
              style="color: #1890ff; font-size: 14px"
              @click="changeEmail"
              >绑定</a
            >
          </div>
        </li>
        <li class="revise_item">
          <div class="revise_item_meta">
            <h4>MFA 设备</h4>
            <div class="revise_item_meta_desc">
              未绑定 MFA 设备，绑定后，可以进行二次确认
              <span></span>
            </div>
          </div>
          <div class="revise_item_action">
            <a style="color: #1890ff; font-size: 14px">绑定</a>
          </div>
        </li>
      </ul>
    </div>
    <el-dialog
      title="修改密码"
      :visible.sync="passwordDialogVisible"
      width="30%"
      v-if="passwordDialogVisible"
    >
      <modify-pass-word ref="passForm"></modify-pass-word>
      <span slot="footer" class="dialog-footer">
        <el-button @click="passwordDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="savePwd">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 手机 -->
    <el-dialog
      :title="userData.mobile ? '修改手机号' : '绑定手机号'"
      :visible.sync="phoneDialogVisible"
      width="30%"
      @close="closePhone"
    >
      <el-form
        :model="phoneForm"
        ref="phoneForm"
        :rules="phoneRules"
        label-width="80px"
        size="small"
      >
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="phoneForm.phone" clearable></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="pwd">
          <el-input v-model="phoneForm.pwd" show-password clearable></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="phoneDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="savePhone('phoneForm')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 邮箱 -->
    <el-dialog
      :title="userData.email ? '修改邮箱' : '绑定邮箱'"
      :visible.sync="emailDialogVisible"
      width="30%"
      @close="closeEmail"
    >
      <el-form
        :model="emailForm"
        ref="emailForm"
        :rules="emailRules"
        label-width="80px"
        size="small"
      >
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="emailForm.email" clearable></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="pwd">
          <el-input v-model="emailForm.pwd" show-password clearable></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="emailDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveEmail('emailForm')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import modifyPassWord from "./modifyPassWord/index.vue";
import { getUser, modifyPhone, modifyEmail } from "@/service/user";
export default {
  name: "securitySet",
  components: {
    modifyPassWord,
  },
  data() {
    return {
      //密码
      passwordDialogVisible: false,
      //手机
      phoneDialogVisible: false,
      //邮箱
      emailDialogVisible: false,
      //用户数据
      userData: {
        mobile: "",
        mobilebind: "当前未绑定手机",
        email: "",
        emailbind: "当前未绑定邮箱",
      },
      //手机
      phoneForm: {
        phone: "",
        pwd: "",
      },
      phoneRules: {
        phone: [{ required: true, message: "请输入手机号", trigger: "blur" }],
        pwd: [{ required: true, message: "确认密码", trigger: "blur" }],
      },

      //邮箱
      emailForm: {
        enail: "",
        pwd: "",
      },
      emailRules: {
        email: [{ required: true, message: "请输入邮箱", trigger: "blur" }],
        pwd: [{ required: true, message: "确认密码", trigger: "blur" }],
      },
    };
  },
  methods: {
    //打开密码对话框
    changePass() {
      this.passwordDialogVisible = true;
    },
    //保存修改密码
    savePwd() {
      this.$refs.passForm.modifypw();
      setTimeout(() => {
        if (this.$refs.passForm.isClose) {
          this.passwordDialogVisible = false;
        }
      }, 200);
    },

    // 手机
    changePhone() {
      this.phoneDialogVisible = true;
    },

    //保存手机
    savePhone(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          modifyPhone({
            mobile: this.phoneForm.phone,
            pwd: this.phoneForm.pwd,
          }).then((res) => {
            if (res.succeed) {
              this.$message({
                type: "success",
                message: "成功!",
              });
              this.getUserData();
              this.phoneDialogVisible = false;
            } else {
              this.$message({
                type: "error",
                message: res.errMsg,
              });
            }
          });
        } else {
          return false;
        }
      });
    },
    closePhone() {
      this.phoneForm.phone = "";
      this.phoneForm.pwd = "";
    },

    //邮箱
    changeEmail() {
      this.emailDialogVisible = true;
    },

    //保存邮箱
    saveEmail(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          modifyEmail({
            email: this.emailForm.email,
            pwd: this.emailForm.pwd,
          }).then((res) => {
            if (res.succeed) {
              this.$message({
                type: "success",
                message: "成功!",
              });
              this.emailDialogVisible = false;
              this.getUserData();
            } else {
              this.$message({
                type: "error",
                message: res.errMsg,
              });
            }
          });
        } else {
          return false;
        }
      });
    },
    closeEmail() {
      this.emailForm.email = "";
      this.emailForm.pwd = "";
    },
    //获取用户信息
    getUserData() {
      getUser().then((res) => {
        if (res.data.mobile) {
          let mobile = res.data.mobile;
          this.userData.mobile = mobile.replace(mobile.substring(3, 7), "****");
          this.userData.mobilebind = "已绑定手机";
        }
        if (res.data.email) {
          this.userData.email = res.data.email;
          this.userData.emailbind = "已绑定邮箱";
        }
      });
    },
  },
  mounted() {},
  created() {
    this.getUserData();
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.block {
  width: 100%;
  display: flex;
  .security_set {
    width: 100%;
    padding: 0 50px 20px;
    > h4 {
      font-size: 18px;
      font-weight: normal;
      // margin: 0;
      margin: 10px 0 30px;
    }
    .revise {
      width: 100%;
      list-style: none;
      margin: 0;
      padding: 0;
      .revise_item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #f0f0f0;
        padding: 15px 10px;
        .revise_item_meta {
          h4 {
            margin: 0;
            padding: 0;
            margin-bottom: 4px;
            color: rgba(0, 0, 0, 0.85);
            font-size: 14px;
            line-height: 1.6;
            font-weight: normal;
          }
          .revise_item_meta_desc {
            color: rgba(0, 0, 0, 0.45);
            font-size: 14px;
            line-height: 1.6;
          }
        }
      }
    }
  }
}
</style>